<script setup lang="ts">

import SimpleUserCard from '@/components/SimpleUserCard.vue'
import Loading from '@/components/Loading.vue'







// defineProps 泛型不允许使用来自外部的接口
interface UserDisplayInformationDto {
  /**
   * 头像
   */
  avatar: string;
  /**
   * 生日
   */
  birthday?: string;
  id?: number;
  /**
   * 可以没有，表示不公开这个信息
   */
  sex?: string;
  /**
   * 简介
   */
  shortIntroduce: string;
  /**
   * 用户名
   */
  username: string;
  [property: string]: any;
}
const props = defineProps<UserDisplayInformationDto>()





// onBeforeMount(() => {
//   userData.value = {
//     username: '天晴',
//     avatar: ''
//   }
// })


</script>

<template>


  <div class="user__profile__card">
    <video poster="/UserProfileCardBackground/windmills.jpg" loop autoplay>
      <source src="/UserProfileCardBackground/windmills.webm" type="video/webm" />
      <source src="/UserProfileCardBackground/windmills.mp4" type="video/mp4" />
    </video>
    <template v-if="props.username">
      <simple-user-card class="user__simple__card"
                        :username="props.username"
                        :avatar="props.avatar"
      />

      <div class="user__more__info">

      </div>
    </template>
    <loading v-else></loading>

  </div>


</template>

<style scoped lang="scss">
.user__profile__card {
  position: relative;
  height: 240px;
  display: flex;
  flex-direction: column-reverse;

  video {
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: bottom;
    z-index: 0;
  }

  .user__more__info {
    position: absolute;
    height: 50%;
    width: 100%;
    background: rgba(65, 74, 77, 0.6);
  }

  .user__simple__card {
    position: absolute;
    z-index: 1;
  }
}



</style>
